@font-face {
    font-family: 'Handgeschrieben';
    src: url('../fonts/Blokletters-Balpen.ttf');
}

@font-face {
    font-family: 'Uberschrift';
    src: url('../fonts/PoloBrush.ttf');
}
root { 
    display: block;
}

body {
    background: none repeat scroll 0 0 black;
    background-image: url("../images/bg.jpg");
    margin-left: 0px;


}

#border_left{
    position: fixed;
    z-index: 50;
    top: 0px;
    height: 100%;
    width: 20px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("../images/rand_links.png");
}

#top {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 200px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("../images/rand_oben.png");
}

#head_left{
    float: left;
    padding-left: 20px;
    color:white;
    font: 14pt 'Special Elite',"Consolas","Monaco",monospace;
    white-space:nowrap;
}

#head_right{
    float: right; 
    padding: 0px 40px 20px 40px;
    width: 360px;
    color:white;
    font: 14pt 'Special Elite',"Consolas","Monaco",monospace;


}


#status {

}

#status ul {
    list-style: none;
    padding-left: 10;
}

#status li {
    margin-right: 20px;
    margin-bottom: 1em;
    color:white;
    float: left;
    cursor: default;

}

#status a, #status a:visited, #head_left a, #head_left a:visited {
    color: #fff;
    font: 14pt 'Special Elite',"Consolas","Monaco",monospace;
    text-decoration:none;

}

#status a:active, #status a:hover, #head_left a:active, #head_left a:hover {
    position: relative;
    top: 2px;
    color: #aaa;

}


.messages ul, .error ul  {
    list-style: none;
    padding-left: 10;
}

.messages li, .error li  {

    margin-bottom: 1em;
    float: left;
    clear: both;
    float: left;
    color:green;
    font: 8pt 'Special Elite',"Consolas","Monaco",monospace;
}


.messages li{

    color: green;

}

.error li{

    color:red;

}

#buttommenu{
    position:fixed;
    pointer-events:none;
    z-index: 50;
    bottom:0px;
    width: 100%;
    height: 100px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("../images/rand_unten.png");
    // user-select: none;


}
#buttommenu a{
    padding-right: 20px;
    pointer-events: all;
}

.staticlinks{
    margin-top: 20px;
    margin-left: 50px;

}

.inbeta{
    margin-top: -10px !important;
    margin-right: 0px;
    float: left;
}

#logo {
    position:relative;
    top:80px;
    left: 1000px;
    background-image: url("../images/logo.png");
    background-repeat: no-repeat;
    height: 350px;
    width: 300px;
    overflow-x:hidden;
    -webkit-transform: rotate(10deg); 
    -moz-transform: rotate(10deg);
}

#wrapper{
    margin-top: 100px;
    max-width: 940px;
    padding:10px 0px 20px 0px;
}


#contact{
    position: absolute;
    font-family: 'Handgeschrieben'; 
    background-image: url("../images/bgEnvelope.jpg");
    background-repeat:no-repeat;
    height:540px;
    width: 960Px;
    padding: 10px 40px 80px 100px;
    z-index: 40;
}

#contact_form{
    width: 450px;

}

#contact_form input, textarea, select {

    background-color: rgba(255, 254, 250, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.20);

}


.contact_send {
    position: absolute;
    cursor: pointer;
    top: 100px;
    left: 630px;
    height: 40px;
    border: none !important;
    background-color: transparent !important;
    color:green;
    font-size: 36px;
    -webkit-transform: rotate(-10deg); 
    -moz-transform: rotate(-10deg);
    /* IE 8 testen */
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.contact_send:hover {
    top:102px;
    left:652px;
}


#contact_to {
    position: absolute;
    top: 340px;
    left: 660px;
    font-size: 20px;

}

#mapitems {
    margin-top: 10px;
    height:600px;
    width:600px;

}

#locationhandler{
    margin-top: 40px;
    margin-left: 80px;
    height: 860px;


}
#maps {
    text-align: center;
    background-color: rgba(242, 240, 212,0.7);
    margin-left:20px;
    padding: 20px;
    height: 740px;
    width: 600px;
}

.info{
    text-align: center;
    font-size: 18px;
    font-style: italic;

}

#notebook{
    font-family: 'Handgeschrieben'; 
    background-image: url("../images/notebook.png");
    background-repeat:repeat-y;
    position:absolute;
    float: left;
    min-height:1280px;
    width:768px;
    z-index: 20;
}

#errorpage {
    font-family: 'Handgeschrieben'; 
    background-image: url("../images/bgEmptyBox.png");
    background-repeat: no-repeat;
    position:absolute;
    width: 768px;
    height: 768px;
    top: 100px;
    left: 50px;
    z-index:40;
    padding-top: 80px;  
    text-align: center;
}



#welcome, #about, #events, #event_add, #account, #game, #faq, #beta {

    margin: 74px 20px 20px 100px; 
}
#beta a, #beta a:visited {
    color: grey;
    text-decoration:none;    
}

#analytical {

    margin-top:40px;
    margin-left: 90px;
    height: 1400px;

}

#analyticalCake , #analyticaltLines, #analyticalGameCount {
    margin-top: 30px;
    width: 660px;
    background-color: rgba(242, 240, 212,0.3);
}
#analyticalCake , #analyticaltLines {

    height: 350px;  
}


#analyticalGameCount {


}

#navigation{
    position: absolute;
    top:60px; left:240px;
    padding-left: 0;
}



#navigation a, #navigation a:visited{
    position:relative;
    margin-bottom: 1em;
    background-image: url("../images/postit.png");  
    height: 40px;
    width: 130px;
    margin: 5px 15px 20px 15px;
    padding: 5px 10px 20px 10px;
    float: left;
    z-index: 10;
    color:black;
    font-family: 'Uberschrift'; 
    font-size: 24px;
    text-decoration:none;
}

#navigation a:active, #navigation a:hover{
    top:-2px;
}


body.event #navigation  a.event, body.analytical #navigation  a.analytical {
    z-index: 40;
}

body.contact .contact, body.faq .faq, body.about .about, body.index .index {

    color: #bbb !important;
    font-style:italic !important;

}

.emptySection{
    -moz-user-select: none;
    -webkit-border-select: none;
    -khtml-user-select: none;
    user-select: none;
    cursor: default;
    margin-top: 50px;
    font-size: 25px;
    color:darkgray;
    text-shadow: 1px 1px 0 black;


}

#gender-element input[type="radio"], #color-element input[type="radio"], #game input[type="radio"]  {

}

#gender-element label, #color-element label, #game-element label {

    //    border-right: 2px groove #999999;
    //    color: #FFFFFF;
    //    background: #000000;
    //    font-size: 90%;
    //    font-weight: bold;
    //    height: 32px;
    //    line-height: 32px;
    //    padding-left: 15px;
    //    padding-right: 13px;
    //    text-shadow: 0 1px 0 #000000;
}

#color-element input[type="radio"]:checked + label, #game input[type="radio"]:checked + label{
    // dafür soll das label nach dem radio kommen, bei uns ist der button vom label eingeschlossen
    color: #f00;

}

#color-element label:hover, #game label:hover {
    color: #666;

}

/*
#gender-element input[type="radio"], .notchecked {
    background:url("notchecked.png") 0 0 no-repeat;
}

#gender-element input[type="radio"]:checked, .checked {
    background:url("checked.png") 0 0 no-repeat;
}

*/
#gender-element label[for=gender-m]{
    color:blue;

}

#gender-element label[for=gender-f]{
    color:red;

}

label #color-FFFFFF {

    background-color: green;
}

#register{


}

.kleingedruckte{

    font-size: 11px;

}

.errors{

}

.errors li{
    font-weight: bold;
    list-style:none;
    background-image: url(../images/marker.png);
    background-color: rgba(255, 51, 0, 1);
    padding: 10px 10px;
    width: 300px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
}


a.button-add{
    width: 190px;
    height: 28px;
    float:right;
    color: black;
    padding: 10px;
    text-decoration: none;
    vertical-align:middle;
    background-image: url("../images/Postit_orange.png");
    background-repeat: no-repeat;
    font-family: 'Uberschrift';
    font-size: 18px;

    /*background-color: rgba(232,238,16, 1);
    */
}

a.button-add:hover{}

a.button-add:active{}

.loop-table {
    margin-top: 30px;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0

}

.loop-table td {

    padding: 0.2em 25px 0.2em 0.5em; 
}

.loop-table tr {
    line-height: 24px;
}

.loop, .loop-grey{
    background-color: rgba(230, 233, 235, 0.90);

}

.loop-grey {

    background-color: rgba(255, 254, 250, 0.50);

}
.loop-table td a, .loop-table td a:visited {
    font-size: 18px;
    color:black;
    text-decoration: none;
    display: block; width: 100%;
}
.loop-table tr.loop:hover, .loop-table tr.loop-grey:hover{

    background-color: rgba(160, 50, 35, 0.10);
}

input, textarea, select {
    font-size: 18px;
    font-family: 'Handgeschrieben'; 
    background-color: rgba(230, 240, 220, 0.60);
    border: 1px solid rgba(10, 10, 10, 0.10);

}
input {
    height: 28px;
    margin-bottom: 8px;
}

select {
    margin-bottom: 8px;
}


::-webkit-input-placeholder  { color: rgba(156, 149, 149, 0.90); }
textArea:-moz-placeholder, input:-moz-placeholder { color: rgba(156, 149, 149, 0.90); }